<!DOCTYPE html>
<html>
<body>
<canvas id="physicsCanvas" width="500" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.lineWidth = 3;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = 'bold 20px sans-serif';

    // Coordinates and dimensions
    const bX = 250;
    const bY = 220;
    const halfLambda = 80;
    
    const aX = bX - halfLambda;
    const aY = bY;
    const cX = bX + halfLambda;
    const cY = bY;
    const dX = bX;
    const dY = bY - halfLambda;

    const r1X = 100;
    const r1Y = 190;
    const r2X = 250;
    const r2Y = 320;

    // --- Helper function for drawing arrowheads ---
    function drawArrowHead(ctx, x, y, angle) {
        const arrowLength = 12;
        ctx.beginPath();
        ctx.moveTo(x, y); // Tip of the arrow
        ctx.lineTo(x - arrowLength * Math.cos(angle - Math.PI / 6), y - arrowLength * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(x - arrowLength * Math.cos(angle + Math.PI / 6), y - arrowLength * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fill();
    }
    
    // --- Helper function for drawing λ/2 fraction ---
    function drawLambdaFraction(ctx, x, y) {
        const originalFont = ctx.font;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Lambda symbol
        ctx.font = 'italic bold 22px serif';
        ctx.fillText('λ', x, y - 8);
        
        // Fraction line
        const originalLineWidth = ctx.lineWidth;
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(x - 12, y + 2);
        ctx.lineTo(x + 12, y + 2);
        ctx.stroke();
        ctx.lineWidth = originalLineWidth;

        // Number 2
        ctx.font = 'bold 20px sans-serif';
        ctx.fillText('2', x, y + 15);

        ctx.font = originalFont; // Restore original font
    }

    // --- Start drawing the diagram ---

    // 1. Draw main lines
    // Horizontal line A-C
    ctx.beginPath();
    ctx.moveTo(aX, aY);
    ctx.lineTo(cX, cY);
    ctx.stroke();
    
    // Vertical line B-D
    ctx.beginPath();
    ctx.moveTo(bX, bY);
    ctx.lineTo(dX, dY);
    ctx.stroke();

    // 2. Add arrowheads at the ends (A, C, D)
    drawArrowHead(ctx, aX, aY, Math.PI);        // At A, pointing left
    drawArrowHead(ctx, cX, cY, 0);              // At C, pointing right
    drawArrowHead(ctx, dX, dY, -Math.PI / 2);   // At D, pointing up

    // 3. Draw receiver points (R1, R2)
    ctx.beginPath();
    ctx.arc(r1X, r1Y, 4, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(r2X, r2Y, 4, 0, 2 * Math.PI);
    ctx.fill();

    // 4. Draw text labels (A, B, C, D)
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('A', aX - 20, aY);
    ctx.fillText('B', bX, bY + 20);
    ctx.fillText('C', cX + 20, cY);
    ctx.fillText('D', dX, dY - 20);

    // 5. Draw receiver labels (R1, R2) with subscripts
    // R1 Label
    ctx.font = 'bold 22px sans-serif';
    ctx.fillText('R', r1X - 20, r1Y + 3);
    ctx.font = 'bold 16px sans-serif';
    ctx.fillText('1', r1X - 9, r1Y + 9);

    // R2 Label
    ctx.font = 'bold 22px sans-serif';
    ctx.fillText('R', r2X, r2Y + 25);
    ctx.font = 'bold 16px sans-serif';
    ctx.fillText('2', r2X + 11, r2Y + 31);
    
    // 6. Draw distance labels (λ/2)
    // Between A and B
    drawLambdaFraction(ctx, (aX + bX) / 2, aY + 30);
    // Between B and C
    drawLambdaFraction(ctx, (bX + cX) / 2, cY + 30);
    // Between B and D
    drawLambdaFraction(ctx, bX + 30, (bY + dY) / 2);

    // 7. Draw the figure caption
    ctx.font = '20px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 4.2', bX, 420);

</script>
</body>
</html>